var list = document.querySelector('.doc-info-li');
var lis = list.querySelectorAll('li');
var items = document.querySelectorAll('.doc-info-pic-item');
for(var i = 0; i < lis.length; i++){    //循环绑定事件
    lis[i].setAttribute('data-index', i);//设置data-index属性和属性值
    lis[i].onmouseover = function(){
        for(var i = 0; i < lis.length; i++){
            lis[i].className = ''; //清空类属性
        }
        this.className = 'doc-li-current';//给当前添加current类

        var n = this.getAttribute('data-index');//获取data-index的属性值给 n
        //第二部分，点击显示对应内容部分
        for(var i = 0; i < lis.length; i++){
            items[i].style.display = 'none';//把所有的display设置为不可见
        }

        items[n].style.display = 'block';//把对应 n 的display设置为可见
    }
}